import './index.scss'
import ReactQuill from "react-quill";
import 'react-quill/dist/quill.snow.css'

import {PlusOutlined} from '@ant-design/icons'
import {Breadcrumb, Button, Card, Form, Input, message, Radio, Select, Space, Upload} from "antd";
import {Link, useNavigate, useSearchParams} from "react-router-dom";
import {useEffect, useState} from "react";
import {createArticleApi, getArticleByIdApi, updateArticleApi} from "@/apis/article";
import {useChannel} from "@/hooks/useChannel";


const {Option} = Select
const Publish = () => {
    const [imageList, setImageList] = useState([])
    const [imageType, setImageType] = useState(1)
    const {channelList} = useChannel()
    const navigate = useNavigate()
    const [searchParams] = useSearchParams()
    const articleId = searchParams.get('id')
    const [form] = Form.useForm()

    const onFinish = async (formData) => {
        if (imageList.length !== imageType) return message.warning('图片数量不够！')
        const {title, channel_id, content} = formData
        const reqData = {
            title,
            content,
            cover: {
                type: imageType,
                images: imageList.map(item =>{
                    if (item.response){
                        return item.response.data.url
                    }else {
                        return item.url
                    }
                })
            },
            channel_id
        }
        if (articleId){
            await updateArticleApi({...reqData, id: articleId})
        }else {
            await createArticleApi(reqData)
        }
        navigate('/article')
        alert("提交成功！")
    }
    const onChange = (value) => {
        setImageList(value.fileList)
    }
    const onTypeChange = (e) => {
        setImageType(e.target.value)
    }

    useEffect(() => {
        async function getArticleDetial() {
            const res = await getArticleByIdApi(articleId)
            console.log(res)
            form.setFieldsValue({
                ...res.data,
                type:res.data.cover.type
            })
            setImageType(res.data.cover.type)
            setImageList(res.data.cover.images.map(url=>{
                return {url}
            }))
        }
        if (articleId){
            getArticleDetial()
        }
    }, [articleId,form])


    return (
        <div className='publish'>
            <Card
                title={
                    <Breadcrumb items={[
                        {title: <Link to={'/'}>首页</Link>},
                        {title: `${articleId?'编辑':'发布'}文章`}
                    ]}
                    />
                }
            >
                <Form
                    labelCol={{span: 4}}
                    wrapperCol={{span: 16}}
                    initialValues={{type: 1}}
                    onFinish={onFinish}
                    form={form}
                >
                    <Form.Item
                        label='标题'
                        name='title'
                        rules={[{required: true, message: '请输入文章标题'}]}
                    >
                        <Input placeholde="请输入文章标题" style={{width: 400}}/>
                    </Form.Item>
                    <Form.Item
                        label='频道'
                        name='channel_id'
                        rules={[{required: true, message: '请输入文章频道'}]}
                    >
                        <Select placeholder='请选择文章频道' style={{width: 400}}>
                            {channelList.map(item => <Option key={item.id} value={item.id}>{item.name}</Option>)}
                        </Select>
                    </Form.Item>
                    <Form.Item label='封面'>
                        <Form.Item name='type'>
                            <Radio.Group onChange={onTypeChange}>
                                <Radio value={1}>单图</Radio>
                                <Radio value={3}>三图</Radio>
                                <Radio value={0}>无图</Radio>
                            </Radio.Group>
                        </Form.Item>
                        {imageType > 0 && <Upload
                            listType='picture-card'
                            showUploadList
                            action={'http://geek.itheima.net/v1_0/upload'}
                            name='image'
                            onChange={onChange}
                            maxCount={imageType}
                            fileList={imageList}
                        >
                            <div style={{marginTop: 8}}>
                                <PlusOutlined/>
                            </div>
                        </Upload>}
                    </Form.Item>
                    <Form.Item
                        label='内容'
                        name='content'
                        rules={[{required: true, message: '请输入文章内容'}]}
                    >
                        <ReactQuill
                            className='publish-quill'
                            theme='snow'
                            placeholder='请输入文章内容'
                        />
                    </Form.Item>
                    <Form.Item wrapperCol={{offset: 4}}>
                        <Space>
                            <Button size='large' type='primary' htmlType='submit'>
                                发布文章
                            </Button>
                        </Space>
                    </Form.Item>
                </Form>

            </Card>
        </div>
    )
}

export default Publish